<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 80%;
            margin: 8em auto;
            max-width: 750px;
            height: 10vh;
            border: 1px solid #CCC;
        }
        
        ul {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            list-style-type: none;
            -webkit-user-select: none;
            user-select: none;
        }
        
        li {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            width: 11.11%;
            height: 100%;
            text-align: center;
            background: #CCC;
            transform-origin: 50% 80%;
            transform: translatex(-100%) scaleZ(1);
            pointer-events: none;
        }
        
        li[class^=i_] {
            visibility: visible;
            opacity: 1;
            background: #CCC;
            transform: scale(1) scaleZ(1);
        }
        
        .anim>li {
            transition: all .5s;
        }
        
        li.i_0 {
            z-index: 1;
            left: 0;
        }
        
        li.i_1 {
            z-index: 2;
            left: 7.11%;
            background: blue;
            transform: scale(1.2) scaleZ(1);
        }
        
        li.i_2 {
            z-index: 3;
            left: 16.22%;
            background: #CCC;
            transform: scale(1.4) scaleZ(1);
        }
        
        li.i_3 {
            z-index: 4;
            left: 26.33%;
            background: blue;
            transform: scale(1.6) scaleZ(1);
        }
        
        li.i_4 {
            z-index: 5;
            left: 44.44%;
            background: #CCC;
            transform: scale(1.8) scaleZ(1);
        }
        
        li.i_5 {
            z-index: 4;
            left: 62.55%;
            background: blue;
            transform: scale(1.6) scaleZ(1);
        }
        
        li.i_6 {
            z-index: 3;
            left: 72.66%;
            background: #CCC;
            transform: scale(1.4) scaleZ(1);
        }
        
        li.i_7 {
            z-index: 2;
            left: 81.77%;
            background: blue;
            transform: scale(1.2) scaleZ(1);
        }
        
        li.i_8 {
            z-index: 1;
            left: 88.88%;
        }
        
        li.i_8+li {
            left: 88.88%;
            transform: translatex(100%) scaleZ(1);
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <script>
     var ul=document.querySelector("ul");
     var lis=ul.children,i=0,ii=lis.length,len=ii,frg=document.createDocumentFragment();
     for(;i<ii;i++)
     {
       frg.appendChild(lis[i].cloneNode(true));
     }
     frg.appendChild(lis[0].cloneNode(true));
     ul.appendChild(frg);

     function pos(idx,offsetX){
       var i=len*2,start=(idx+len)-offsetX,end;
        end=start+len-1;
        while(i--)
        {
          lis[i].className=i<start||i>end?"":"i_"+(i-end+len-1);
        }
     }

     function _ulPosReset(){
        this.classList.remove("anim");
        pos(this._idx,this._offsetX,true);
        this.offsetHeight;
        this.classList.add("anim");
      }

     ul._offsetX=Math.floor(ii/2);
     ul._idx=0;
     ul.classList.add("anim");
     pos(ul._idx,ul._offsetX);

     ul.addEventListener("mousedown",function(e){
        this._cx=e.clientX;
        this._dir=0;
     },false);
     ul.addEventListener("mousemove",function(e){
       this._dir=this._cx-e.clientX;
     },false);
     ul.addEventListener("mouseup",function(e){
       if(this._dir===0)
       { 
         var rc=this.getBoundingClientRect();
         this._dir=e.clientX>rc.left+rc.width/2?-1:1;
       }
       if(this._dir<0)
        {
          if(this._idx<-this._offsetX){
            this._idx+=len;
            _ulPosReset.call(this);
          }
          pos(--this._idx,this._offsetX);
        }
        else
        {
          if(this._idx>=this._offsetX){
            this._idx-=len;
            _ulPosReset.call(this);
          }
          pos(++this._idx,this._offsetX);
        }
     },false);
   </script>
</body>

</html>